<template>
    <div class="m-search">
        <div class="search-opt">
            <div
                class="search-item-sel"
                @click="handleFoldOptMore"
                @hover="handleHoverOPtMore"
            >
                <span class="search-item-name">{{ searchType.name }}</span>
                <i class="arrow-b"></i>
            </div>
            <transition>
                <ul v-show="isShowOptMoreList" class="search-opt-list">
                    <li
                        class="search-opt-item"
                        :class="{ active: item.value === searchType.value }"
                        v-for="item in types"
                        :key="item.value"
                        @click="handleCheckedType(item)"
                    >
                        <span>{{ item.name }}</span>
                    </li>
                </ul>
            </transition>
        </div>
        <div class="search-bar">
            <input
                ref="searchCont"
                type="text"
                v-model="searchCont"
                placeholder="请输入搜索内容"
                @focus="handleCloserOption"
                @blur="handleCloserOption"
            />
            <i class="search-btn" @click="handleSearch"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'mSearch',
    data() {
        return {
            isShowOptMoreList: false, // 是否选择类型下拉
            searchType: {}, // 选择下拉的类型
            searchCont: ''
        };
    },
    props: {
        types: Array
    },
    watch: {
        types(newValue) {
            if (!this.searchType.name && newValue && newValue.length > 0) {
                this.searchType = newValue[0];
            }
        }
    },
    mounted() {
        this.searchType = this.types[0];
    },
    methods: {
        /* 展开收起类型下拉 */
        handleFoldOptMore() {
            this.isShowOptMoreList = !this.isShowOptMoreList;
        },
        handleHoverOPtMore() {
            this.isShowOptMoreList = true;
        },
        /* 选择对应的类型 */
        handleCheckedType(item) {
            this.searchType = item;
            this.searchCont = '';
            this.$refs.searchCont.focus();
        },
        /*关闭下拉框*/
        handleCloserOption: function() {
            this.isShowOptMoreList = false;
        },
        /* 搜索 */
        handleSearch() {
            this.$emit('search', {
                type: this.searchType.value || '',
                value: this.searchCont
            });
        }
    }
};
</script>
<style scoped lang="scss">
.m-search {
    display: flex;
    width: 100%;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(204, 204, 204, 1);
    .search-opt {
        position: relative;
        min-width: 60px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #999;
        text-align: center;
        .search-item-sel {
            .search-item-name {
                padding: 0 20px 0 8px;
                cursor: pointer;
            }
            .arrow-b {
                position: absolute;
                top: 8px;
                right: 10px;
                width: 8px;
                height: 8px;
                margin-bottom: 4px;
                margin-left: 4px;
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                cursor: pointer;
            }
        }

        .search-opt-list {
            border-radius: 6px;
            background: #fff;
            border: 1px solid #ccc;
            .search-opt-item {
                cursor: pointer;
                span {
                    display: block;
                    margin: 0 3px;
                    padding: 0;
                }
            }
            .search-opt-item:hover {
                background: rgba(160, 160, 160, 0.2);
            }
            .search-opt-item:not(:last-child) {
                border-bottom: 1px solid #ccc;
            }
            .active {
                color: rgba(0, 106, 222, 1);
            }
        }
    }
    .search-bar {
        flex: 1;
        display: flex;
        align-items: center;
        input {
            display: block;
            width: calc(100% - 36px);
            margin: 0;
            padding: 0;
            line-height: 32px;
            background: none;
            border: none;
            outline: none;
        }
        input::placeholder {
            color: rgb(204, 204, 204);
        }
        .search-btn {
            flex-shrink: 0;
            display: block;
            width: 20px;
            height: 20px;
            margin: 0 8px;
            background: url(../assets/image/icon/icon-search.png) no-repeat;
            background-size: contain;
            cursor: pointer;
        }
    }
}
</style>
